<template>
	<div class="base-info-content"> 
		<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="150px"
			:size="formSize" status-icon>
			<el-form-item label="商品规格：" prop="specsId">
				<section style="display: flex; flex-direction: column;">
					<section>
						<el-select v-model="ruleForm.specsId" placeholder="请选择商品属性" class="form-ele-size">
							<el-option :label="item.value" :value="item.id" v-for="item of state.specsList" :key="item.id" /> 
						</el-select>
						<el-button type="primary" class="ml20" @click="specsIdSubmit"> 确认 </el-button>
						<el-button type="primary" class="ml20"> 添加规格模板 </el-button>
					</section>
					<section class="mt20 mb20">
						<el-col v-for="(item,index) of state.specsData" :key="index" :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
							<section>
								<el-tag class="mx-1" closable>{{ item.itemName }}</el-tag>
								<div>
									<el-tag v-for="(item1,index1) of item.itemList" :key="index1" class="mr15" closable>{{ item1.value}}</el-tag>
									<el-input class="width180" placeholder="请输入" clearable>
										<template #append>添加</template>
									</el-input>
								</div>
							</section>
						</el-col>
						<el-col v-if="state.isAddSpecs" :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
							<el-row>
								<el-col :xs="9" :sm="9" :md="9" :lg="9" :xl="9">
									<el-form-item label="规格名称">
										<el-input class="width180" placeholder="请输入" clearable></el-input>
									</el-form-item>
								</el-col>
								<el-col :xs="9" :sm="9" :md="9" :lg="9" :xl="9">
									<el-form-item label="规格值">
										<el-input class="width180" placeholder="请输入" clearable></el-input>
									</el-form-item>
								</el-col>
								<el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6" class="pl20">
									<el-button type="primary"  @click="addSpecsItem">添加</el-button>
									<el-button type="primary"  @click="cancel">取消</el-button>
								</el-col>
							</el-row>
						</el-col>
						<el-col v-if="!state.isAddSpecs" :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
							<el-button type="primary"  @click="state.isAddSpecs = !state.isAddSpecs">添加新规格</el-button>
							<el-button type="primary"  @click="generate">立即生成</el-button>
						</el-col>
					</section>
				</section>
			</el-form-item>
			<el-form-item label="批量设置：">
				<el-table :data="state.batchSettingsTable" border style="width: 100%">
					<el-table-column prop="address" label="图片">
						<template #default>
							<el-input placeholder="请输入" />
						</template>
					</el-table-column>
					<el-table-column prop="address" label="售价">
						<template #default>
							<el-input placeholder="请输入" />
						</template>
					</el-table-column>
					<el-table-column prop="address" label="成本价">
						<template #default>
							<el-input placeholder="请输入" />
						</template>
					</el-table-column>
					<el-table-column prop="address" label="原价">
						<template #default>
							<el-input placeholder="请输入" />
						</template>
					</el-table-column>
					<el-table-column prop="address" label="库存">
						<template #default>
							<el-input placeholder="请输入" />
						</template>
					</el-table-column>
					<el-table-column prop="address" label="原价">
						<template #default>
							<el-input placeholder="请输入" />
						</template>
					</el-table-column>
					<el-table-column prop="address" label="原价">
						<template #default>
							<el-input placeholder="请输入" />
						</template>
					</el-table-column>
				</el-table>
			</el-form-item>
			<el-form-item label="卡项属性：">
				<el-table :data="state.skuList" border style="width: 100%">
					<el-table-column v-for="(item,index) of state.skuAttr" :prop="item.key" :label="item.title" :key="index" width="180" />
					<el-table-column prop="pcc4" label="卡项属性" width="180">
						<template #default>
							<el-input placeholder="请输入" />
						</template>
					</el-table-column>
					<el-table-column prop="pcc5" label="零售价" width="180">
						<template #default>
							<el-input placeholder="请输入" />
						</template>
					</el-table-column>
					<el-table-column prop="pcc6" label="划线价" width="180">
						<template #default>
							<el-input placeholder="请输入" />
						</template>
					</el-table-column>
					<el-table-column prop="pcc7" label="最低价" width="180">
						<template #default>
							<el-input placeholder="请输入" />
						</template>
					</el-table-column>
					<el-table-column prop="pcc8" label="虚拟库存" width="180">
						<template #default>
							<el-input placeholder="请输入" />
						</template>
					</el-table-column>
					<el-table-column prop="pcc9" label="可用次数" width="180">
						<template #default>
							<el-input placeholder="请输入" />
						</template>
					</el-table-column>
                    <el-table-column prop="pcc9" label="可用时长" width="180">
						<template #default>
							<el-input placeholder="请输入" />
						</template>
					</el-table-column>
					<el-table-column prop="pcc10" label="服务时长" width="180">
						<template #default>
							<el-input placeholder="请输入" />
						</template>
					</el-table-column>
                    <el-table-column prop="pcc10" label="操作" width="180">
						<template #default>
							<el-input placeholder="请输入" />
						</template>
					</el-table-column>
				</el-table>
			</el-form-item>
            <el-form-item label="卡项其他属性：">
				<el-table :data="state.skuList" border style="width: 100%">
					<el-table-column v-for="(item,index) of state.skuAttr" :prop="item.key" :label="item.title" :key="index" width="180" />
					<el-table-column prop="pcc1" label="零售价(元)" width="180">
						<template #default>
							<el-input placeholder="请输入" />
						</template>
					</el-table-column>
					<el-table-column prop="pcc3" label="手工费" width="180">
						<template #default>
							<el-input placeholder="请输入" />
						</template>
					</el-table-column>
					<el-table-column prop="pcc4" label="是否计算手工量" width="180">
						<template #default>
							<el-input placeholder="请输入" />
						</template>
					</el-table-column>
					<el-table-column prop="pcc5" label="消耗业绩" width="180">
						<template #default>
							<el-input placeholder="请输入" />
						</template>
					</el-table-column>
					<el-table-column prop="pcc6" label="消耗提成" width="180">
						<template #default>
							<el-input placeholder="请输入" />
						</template>
					</el-table-column>
					<el-table-column prop="pcc7" label="欠款销售" width="180">
						<template #default>
							<el-input placeholder="请输入" />
						</template>
					</el-table-column>
					<el-table-column prop="pcc8" label="欠款服务" width="180">
						<template #default>
							<el-input placeholder="请输入" />
						</template>
					</el-table-column>
					<el-table-column prop="pcc9" label="退款时限" width="180">
						<template #default>
							<el-input placeholder="请输入" />
						</template>
					</el-table-column>
					<el-table-column prop="pcc10" label="支持售后" width="180">
						<template #default>
							<el-input placeholder="请输入" />
						</template>
					</el-table-column>
                    <el-table-column prop="pcc10" label="操作" width="180">
						<template #default>
							<el-input placeholder="请输入" />
						</template>
					</el-table-column>
				</el-table>
			</el-form-item>
            <el-form-item label="关联商品：" prop="cellStore">
				<el-button type="primary"  >选择关联商品</el-button>
			</el-form-item>
			<section style="text-align: center; margin: 50px 0;">
				<el-button type="primary" size="large" @click="submitForm(ruleFormRef)">提交</el-button>
				<el-button type="primary" size="large" @click="nextStep">下一步</el-button>
			</section>
		</el-form>
		<SelectGoodsImg v-model="selectVisibel" /> 
		<SelectCellStore v-model="storeVisibel" />
		<AddBrand v-model="brandVisibel" />
		<AddCateGory v-model="categoryVisibel"  />
	</div>
</template>

<script setup lang="ts" name="funWangEditor">
import { reactive, ref, defineAsyncComponent } from 'vue';
import { Plus } from '@element-plus/icons-vue'

import type { FormInstance, FormRules } from 'element-plus'
import type { TStep } from '../add.vue'
import AddCategory from '/@/views/commodity/goodList/components/AddCategory.vue';

import '/@/theme/tableTool.scss';
import { ElMessage } from 'element-plus';

const SelectGoodsImg = defineAsyncComponent(() => import('/@/views/commodity/goodList/components/SelectGoodsImg.vue' ))
const SelectCellStore = defineAsyncComponent(() => import('/@/views/commodity/goodList/components/SelectCellStore.vue'  ))
const AddBrand = defineAsyncComponent(() => import('/@/views/commodity/goodList/components/AddBrand.vue'  ))
const AddCateGory = defineAsyncComponent(() => import('/@/views/commodity/goodList/components/AddCategory.vue'  ))
const skuSpecs = defineAsyncComponent(() => import('/@/components/commodity/goodSpecs.vue'))

const emit = defineEmits<{
	stepChange: [step: TStep] 
}>()

const selectVisibel = ref(false)
const storeVisibel = ref(false)
const brandVisibel = ref(false)
const categoryVisibel = ref(false)

const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const state = reactive({
	isAddSpecs:false,
	specsList:[
		{
			value: '衣服',
			id: 229,
			list: [
				{
					itemName: '颜色',
					itemId: 1,
					itemList: [
						{ value: '黑色', id: 1 },
						{ value: '白色', id: 2 },
						{ value: '红色', id: 3 }
					]
				},{
					itemName: '尺寸',
					itemId: 3,
					itemList: [
						{ value: '大号', id: 1 },
						{ value: '中号', id: 2 },
						{ value: '小号', id: 3 }
					]
				}
			]
		}
	],
	specsData: [] as Array<any>,
	batchSettingsTable:[{}],
    skuAttr:[] as Array<any>,
	skuList:[]
})
const ruleForm = reactive({
	specsId:null,
})

const rules = reactive<FormRules<any>>({
	name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
	property: [ {required: true, message: '请选择商品属性', trigger: 'change', }],
	status: [ {required: true, message: '请选择销售状态', trigger: 'change', }],
	system: [ {required: true, message: '请选择系统分类', trigger: 'change', }],
	brand: [ {required: true, message: '请选择商品品牌', trigger: 'change', }],
	category: [ {required: true, message: '请选择门店商品分类', trigger: 'change', }],
	cellStore: [ {required: true, message: '请选择门店商品分类', trigger: 'blur', }],
	specsId: [ {required: true, message: '请选择商品规格', trigger: 'change', }],
})

// 批量设置
const batchForm = reactive({
	sukImg:'',
	retailPrice: null,
	lowerPrice: null,
	costPrice: null,
	linePrice: null,
	inventory: null,
	warnInventory:'',
})

// 选中规格项确认
const specsIdSubmit = () =>{
	if(ruleForm.specsId == null){
		ElMessage({
			type: 'error',
			message: '请选择属性',
		})
	}else{
		let specsData = state.specsList.filter(item => item.id === ruleForm.specsId);
		state.specsData = specsData[0].list;
		console.log(specsData);
	}
};

// 添加规格项
const addSpecsItem = () =>{
	state.isAddSpecs = false
}

// 取消添加规格项
const cancel = () =>{
	state.isAddSpecs = false
}

// 立即生成sku列表
const generate = () =>{
	// 规格项
	const attr = state.specsData;
	const specs = attr.map((item,index) => {
		return {
			key: `value${index}`,
			title: item.itemName,
			align: "center",
			minWidth: 140
		}
	});
	// 多规格表头数据
	state.skuAttr = specs
	const skus = calculateCartesianProduct(attr).map((product: any[]) => {  
		const sku = {};  
		product.forEach((value: any, i: string | number) => {  
			// sku[attr[i].itemName] = value;
			sku[`value${i}`] = value.value
		});  
		return sku;  
	});
	state.skuList = skus
}

const calculateCartesianProduct = (attr:any) =>{
	if (attr.length === 0) {
		return [[]]; // 返回一个空数组，表示没有属性可选
	} else {
		const firstAttribute = attr[0];
		const remainingAttributes = attr.slice(1);
		const firstAttributeValues = firstAttribute.itemList;
		const remainingProduct = calculateCartesianProduct(remainingAttributes);
		return firstAttributeValues.flatMap((value: any) => remainingProduct.map((product: any) => [value].concat(product)));
	}
}
</script>

<style lang="scss" scoped>
.custome-form-item{
	display: flex;
	flex-direction: column;
}
.base-info-content{
	.form-ele-size {
		width: 260px;
	}
	.line-title{
		font-size: 18px;
		padding: 8px 12px;
		background-color: #eceef0;
		border-radius: 6px;
		margin-bottom: 15px;
	}
	.selector-goods-img{
		cursor: pointer;
		width: 90px;
		height: 90px;
		border: 1px solid #ededed;
		border-radius: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		&:hover {
			background-color: #f5f5f5;
			border: 1px solid #e4e3e3;
		}
	}
}
</style>
